<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/swiper.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<div>



		
		<nav class="navbar navbar-default" role="navigation">
			<div class="container-fluid"> 
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
						data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">菜鸟教程</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">关于我们</a></li>
					<li><a href="#">产品中心</a></li>
					<li><a href="#">新闻资讯</a></li>
					<li><a href="#">联系我们</a></li>
				</ul>
			</div>
			</div>
		</nav>
	</div>
	<div class="container ">
		<div class="row">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="main">
					<div class="swiper-container">
				        <div class="swiper-wrapper">
				            <div class="swiper-slide">
				            	<img src="img/banner1.png">
				            </div>
				            <div class="swiper-slide">
				            	<img src="img/banner2.png">
				            </div>
				            <div class="swiper-slide">
				            	<img src="img/banner3.png">
				            </div>
				        </div>
				        <!-- Add Pagination -->
				        <div class="swiper-pagination"></div>
				    </div>
				</div>
			</div>
		</div>
	</div>
	
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>

<script>
	var swiper = new Swiper('.swiper-container', {
	    pagination: '.swiper-pagination',
	    loop:true,
	    autoplay: 3000,
	    paginationClickable: true,
		paginationBulletRender: function (swiper, index, className) {
		      return '<span class="' + className + '"><i></i></span>';
		}
	});
</script>
</body>
</html>